<div class="component message-component">
    <div class="add-new-button-div">
        <div class="add-new-panel panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Add New</h3>
            </div>
            <div class="panel-body">
                <div class="add-button" onclick="addNewHandle()">
                </div>
            </div>
        </div>
    </div>
    <div class="add-div add-message-div">
    </div>
    <div class="data-div">
        <div class="query-div">
            <div class="query-form">
                <input type="text" class="query-input form-control" placeholder="input code or name" />
            </div>
            <div class="operation-div">
                <div class="query-button"></div>
            </div>
        </div>
        <div class="data-list message-list">
        </div>
    </div>

    <div class="templates">
        <div class="item-panel message-item-panel">
            <div class="self">
                <div class="id-div element-div">
                </div>
                <div class="lang-div element-div">
                </div>
                <div class="content-div element-div">
                </div>
                <div class="operation-button-wrap">
                    <div class="modify-button" title="Edit Message Item"></div>
                    <div class="delete-button" title="Delete Message Item"></div>
                </div>
            </div>
        </div>

        <div class="edit-data-panel edit-message-panel panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title"></div>
            </div>
            <div class="panel-body">
                <div class="code-element edit-panel-element">
                    <div class="code-label edit-element-label required">code:</div>
                    <div class="input-div">
                        <input name="code" class="code-value edit-element-value form-control" maxlength="30" />
                    </div>
                </div>
                <div class="name-element edit-panel-element">
                    <div class="name-label edit-element-label required">name:</div>
                    <div class="input-div">
                        <input name="name" class="name-value edit-element-value form-control" maxlength="80" />
                    </div>
                </div>
                <div class="description-element edit-panel-element">
                    <div class="description-label edit-element-label">description:</div>
                    <div class="input-div">
                        <textarea name="description"
                                  class="description-value edit-textarea-element-value form-control"></textarea>
                    </div>
                </div>
                <div class="default-content-element edit-panel-element">
                    <div class="default-content-label edit-element-label">default content:</div>
                    <div class="input-div">
                        <textarea name="default-content"
                                  class="default-content-value edit-textarea-element-value form-control"></textarea>
                    </div>
                </div>
                <button type="button" class="save-button save-group-button btn btn-primary">
                    Save
                </button>
                <button type="button" class="cancel-button cancel-group-button btn btn-success">
                    Cancel
                </button>
            </div>
        </div>
        <div class="edit-item-panel edit-message-item-panel panel panel-primary form-horizontal">
            <div class="subject">Update Message Item</div>
            <div class="lang-element edit-panel-element form-group">
                <div class="lang-label edit-element-label required">lang:</div>
                <div class="input-div">
                    <input name="lang" class="lang-value edit-element-value form-control" maxlength="30" />
                </div>
            </div>
            <div class="content-element edit-panel-element form-group">
                <div class="content-label edit-element-label">content:</div>
                <textarea name="content" class="content-value edit-element-value form-control" />
            </div>
            <div class="button-div">
                <button type="button" class="save-button btn btn-success">
                    Save
                </button>
                <button type="button" class="cancel-button btn btn-primary">
                    Cancel
                </button>
            </div>
        </div>

        <div class="data-panel message-panel panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"></div>
                <div class="button-wrap">
                    <div class="edit-button"></div>
                    <div class="delete-button"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="id-element field-element">
                    <div class="field-label id-label body-element-label">id:</div>
                    <div class="field-value id-value body-element-value"></div>
                </div>
                <div class="code-element field-element">
                    <div class="field-label code-label body-element-label">code:</div>
                    <div class="field-value code-value body-element-value"></div>
                </div>
                <div class="name-element field-element">
                    <div class="field-label name-label body-element-label">name:</div>
                    <div class="field-value name-value body-element-value"></div>
                </div>
                <div class="description-element">
                    <div class="field-label description-label body-element-label">description:</div>
                    <div class="field-value description-value body-element-value"></div>
                </div>
                <div class="default-content-element">
                    <div class="field-label default-content-label body-element-label">default content:</div>
                    <div class="field-value default-content-value body-element-value"></div>
                </div>
                <div class="item-list-wrap message-item-list-wrap">
                    <div class="message-item-list-label body-element-label">items:</div>
                    <div class="message-item-list-button-wrap">
                        <div class="item-list-show-button message-item-list-show-button" title="Show Message Item List">
                        </div>
                        <div class="item-add-button add-message-item-button" title="Add Message Item"></div>
                    </div>
                    <div class="add-item-panel add-message-item-panel panel-body">
                        <ul class="nav nav-tabs">
                            <li class="add-item-tab add-message-item-tab active">
                                <a href="#" data-toggle="tab">Add Message Item</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="add-new-message-item tab-pane fade in active">
                                <div class="add-new-item-panel add-new-message-item-panel panel panel-primary">
                                    <div class="lang-element edit-panel-element">
                                        <div class="lang-label edit-element-label required">lang:</div>
                                        <div class="input-div">
                                            <input name="lang" class="lang-value edit-element-value form-control"
                                                   maxlength="80" />
                                        </div>
                                    </div>
                                    <div class="content-element edit-panel-element">
                                        <div class="content-label edit-element-label">content:</div>
                                        <div class="input-div">
                                        <textarea name="content"
                                            class="content-value edit-textarea-element-value form-control"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-wrap">
                            <button type="button" class="ok-button btn btn-success">
                                OK
                            </button>
                            <button type="button" class="reset-button btn btn-info">
                                Reset
                            </button>
                            <button type="button" class="close-button btn btn-primary">
                                Close
                            </button>
                        </div>
                    </div>
                    <div class="item-table">
                        <div class="item-list">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="windows">
    </div>
</div>

<link type="text/css" rel="stylesheet"
      href="/static/clientlibs/tattoo/datacenter/component/message-component/css/message-component.css" />
<script type="text/javascript"
        src="/static/clientlibs/tattoo/datacenter/component/message-component/js/message-component.js"></script>